import { FC, useState, memo } from "react";

const Child: FC<any> = memo(() => {
  console.log("Child Render");
  return <h1>Child</h1>;
});

interface Props {}
const Fc8: FC<Props> = () => {
  const [num, setNum] = useState(1);
  const onIncrement = () => setNum(num + 1);

  const [num2, setNum2] = useState(2);

  return (
    <fieldset>
      <legend>10-memo留心</legend>
      <h1>num {num}</h1>
      <button onClick={onIncrement}>num+1</button>
      <h1>num2 {num2}</h1>
      <button onClick={() => setNum2(num2 + 1)}>num2+1</button>

      {/* <Child num={num}  />   num变就重新渲染 */}

      {/* <Child setNum={setNum} setNum2={setNum2} />  永不渲染*/}

      <Child setNum={setNum} setNum2={setNum2} onIncrement={onIncrement} />
    </fieldset>
  );
};

export default Fc8;
